<template>

  <FullCalendar :options="calendarOptions">

    <template v-slot:eventContent='arg'>
      <b>{{ arg.event.title }}</b>
    </template>
  </FullCalendar>
</template>
<script setup name="WsCalendar">
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin, { Draggable } from '@fullcalendar/interaction'
import zhLocale from '@fullcalendar/core/locales/zh-cn'
import timeGridPlugin from '@fullcalendar/timegrid'
import { dataView, createEventId } from '../event-utils'
const currentEvents=ref([])
const handleDateSelect = () => {}
const handleEventClick = (item) => {
  console.log(item)
}
const handleEvents = (events) => {}
const showArg = (views) => {
  console.log(views)
}
const calendarOptions = ref({
  locale: zhLocale,
  plugins: [
    dayGridPlugin,
    timeGridPlugin,
    interactionPlugin // needed for dateClick
  ],
  droppable: true,
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  views: {
    timeGridWeek: {
      allDaySlot: false
    }
  },
  initialView: 'dayGridMonth',
  initialEvents:dataView,
  //initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
  editable: true,
  selectable: true,
  selectMirror: true,
  dayMaxEvents: true,
  weekends: true,
  select: handleDateSelect,
  eventClick: handleEventClick,
  eventsSet: handleEvents
})

</script>

<style lang="scss">
.full-calendar {
  padding: 20px;
}
.fc-direction-ltr .fc-timegrid-col-events {
  margin: 0;
}
.fc .fc-timegrid-slot {
  height: 1.8em;
}
.fc .fc-button {
  padding: 0.2em 0.4em !important;
}
.month-list {
  border: 1px #ccc solid;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding: 0 5px;
  width: 100%;
  background-color: #3788d8;
  border-radius: 4px;
  &:hover {
    background-color: none;
  }
}
</style>